<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>系统统计</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
    <span style="font-weight: 600;font-size: 25px;margin-left: 5%;">阿里迪里影院票房TOP10</span>
    <a href="admin_list_pie_black.html" class="layui-btn clr" style="position: absolute;left: 820px;">深色模式</a>
    <a class="layui-btn change" style="position: absolute;left: 920px;">柱状图显示</a>
    <div id="main" style="width: 100%;height: 510px;">

    </div>

    <script src="../js/echarts.min.js"></script>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/Vue.js"></script>
    <script src="js/admin-list-pie.js"></script>
    <script src="js/admin-same.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        myChart.setOption({
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '票房数',
                    type: 'pie',    // 设置图表类型为饼图
                    radius: '65%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    data: [          // 数据数组，name 为数据项名称，value 为数据项值
                        { value: localStorage.getItem("count1"), name: localStorage.getItem("filmName1") },
                        { value: localStorage.getItem("count2"), name: localStorage.getItem("filmName2") },
                        { value: localStorage.getItem("count3"), name: localStorage.getItem("filmName3") },
                        { value: localStorage.getItem("count4"), name: localStorage.getItem("filmName4") },
                        { value: localStorage.getItem("count5"), name: localStorage.getItem("filmName5") },
                        { value: localStorage.getItem("count6"), name: localStorage.getItem("filmName6") },
                        { value: localStorage.getItem("count7"), name: localStorage.getItem("filmName7") },
                        { value: localStorage.getItem("count8"), name: localStorage.getItem("filmName8") },
                        { value: localStorage.getItem("count9"), name: localStorage.getItem("filmName9") },
                        { value: localStorage.getItem("count10"), name: localStorage.getItem("filmName10") }
                    ],
                    itemStyle: {
                        normal: {
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        })
    </script>
</body>
</html>